<template>
  <div class="userRot">
    <!-- 发表者背景 -->
    <div class="userHeader" v-for="(use,index) in userDataList" :key="index" v-if="index==1">
      <img class="usebag" :src="use.user.avatar" alt>
      <header>
        <span style="font-weight:blod" class="fa fa-angle-left" @click="useFan"></span>
      </header>
      <img class="userPto" :src="use.user.avatar" alt>
      <p class="pName" v-text="use.user.nickname"></p>
      <div class="guanzhu">
        <p>
          关注
          <span v-text="userFans.followings_count"></span>
        </p>
        <p>
          粉丝
          <span v-text="userFans.followers_count"></span>
        </p>
      </div>
      <div class="cliguan">关注</div>
    </div>
    <!-- 内容 -->
    <div class="useNav">
      <tab class="ctop" active-color="#fc378c" v-model="index">
        <tab-item
          class="vux-center"
          :selected="demo2 === item"
          v-for="(item, index) in list"
          @click="demo2 "
          :key="index"
        >{{item}}</tab-item>
      </tab>
      <swiper v-model="index" height="1000vw" :show-dots="false">
        <swiper-item class="cNav" v-for="(item, index) in list" :key="index">
          <div v-if="index==0 ">
             <div class="tab-swiper vux-center" v-for="(juzi,j) in userDataList" :key="j" v-if="juzi.uuid != '' ">
            <div v-if="juzi.content != null">
              <p v-text="juzi.content"></p>
              <img v-if="juzi.image != null" class="juziImg" :src="juzi.image.url" alt>
            </div>
            <div class="zan" v-if="juzi.content != null">
              <p>
                <span class="fa fa-heart-o"></span>
                <span v-text="juzi.like_count"></span>
              </p>
              <p>
                <span class="fa fa-commenting-o"></span>
                <span v-text="juzi.comment_count"></span>
              </p>
              <p>
                <span class="fa fa-bookmark-o"></span>
              </p>
              <p>
                <span class="fa fa-share-square-o"></span>
              </p>
            </div>
          </div>
          </div>
         
          <div v-if="index==1" class="tab-swiper vux-center">dsafsadfdsafs</div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  Sticky,
  Divider,
  XButton,
  Swiper,
  SwiperItem
} from "vux";
const list = () => ["句子", "收藏夹"];
export default {
  data() {
    return {
      userDataList: [],
      list: list(),
      demo2: "",
      index: 0,
      userFans: []
    };
  },
  props: ["userid"],
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  },
  mounted() {
    this.getUserMessage();
    this.getUserFans();
  },
  methods: {
    getUserMessage: function() {
      var _this = this;
      this.$http
        .get(
          "judou/api/v6/op/users/" +
            this.userid +
            "/sentences?page=1&per_page=20&token=e16afc7de3b96260de24eb41b22f9879&timestamp=1545441574&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=0d690493f44fed7d11a59ec18ac82092"
        )
        .then(function(value) {
          _this.userDataList = value.body.data;
          console.log(_this.userDataList);
        });
    },
    useFan: function() {
      window.history.back(-1);
      $(".weui-tabbar").show();
    },
    // 粉丝
    getUserFans: function() {
      var _this = this;
      this.$http
        .get(
          "judou/api/v5/users/" +
            this.userid +
            "?token=e16afc7de3b96260de24eb41b22f9879&timestamp=1545441574&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=9a424a63eab0f0f88b4fa023e37a4947"
        )
        .then(function(value) {
          _this.userFans = value.body;
          // console.log(_this.userFans);
        });
    }
  }
};
</script>
<style scoped>
.vux-tab-wrap{
  position: sticky;
  top: 10vw;
  z-index: 1000;
}
.zan {
  margin-top: 3%;
  width: 90vw;
  height: 10vw;
  border-top: 1px solid rgb(228, 224, 224);
  font-size: 5vw;
  display: flex;
  justify-content: space-around;
}
.zan p {
  margin-top: 3%;
}
.tab-swiper {
  border-top: 3vw solid rgb(243, 242, 242);
  padding: 5%;
  font-size: 4vw;
}
.juziImg {
  width: 90vw;
  height: 50vw;
  border-radius: 3vw;
  padding: 3vw 0;
}
.cliguan {
  width: 30vw;
  border: 2px solid rgb(173, 168, 168);
  position: absolute;
  top: 70%;
  left: 38%;
  text-align: center;
  padding: 2vw 0;
  border-radius: 6vw;
  font-size: 4vw;
  color: rgb(177, 171, 171);
}
.userRot {
  width: 100vw;
  height: 100vw;
  z-index: 10000;
}
.userHeader {
  position: relative;
  height: 80vw;
  border-bottom: 3vw solid rgb(245, 243, 243);
}
.userRot header {
  width: 100vw;
  height: 12vw;
  display: flex;
  justify-content: space-between;
  font-size: 7vw;
  background-color: white;
  color: #868080;
  position: fixed;
  top: 0;
  opacity: .9;
  z-index:1000;
}
.userRot header span {
  margin: 3vw;
}
.usebag {
  width: 100%;
  height: 30vw;
  filter: blur(9px);
  position: fixed;
}
.guanzhu {
  display: flex;
  /* border: 2px solid black; */
  position: absolute;
  top: 59%;
  left: 34%;
  font-size: 4vw;
}
.guanzhu > p:nth-child(1) {
  border-right: 1px solid rgb(240, 238, 238);
}
.guanzhu p {
  padding: 0 3vw;
}
.userPto {
  width: 25vw;
  height: 25vw;
  position: absolute;
  top: 13vw;
  left: 38%;
  border-radius: 50%;
}
.pName {
  position: absolute;
  text-align: center;
  font-weight: bold;
  font-size: 4vw;
  top: 40vw;
  left: 40%;
}
.pDes {
  position: absolute;
  width: 90%;
  font-size: 3.5vw;
  color: rgb(163, 149, 149);
  top: 50vw;
  left: 10%;
}
</style>



